<template>
  <div class="page-wrapper">
    <div class="wrapper">
      <a-flex :style="{ height: '190px', paddingLeft: '26px', lineHeight: 1, color: '#ffffff' }" vertical justify="center" align="flex-start">
        <span :style="{ fontSize: '16px', lineHeight: '20px', marginBottom: '6px' }">好友每次获得收益</span>
        <a-flex :style="{ padding: '5px 0', marginBottom: '16px' }" align="flex-end">
          <span :style="{ fontSize: '16px', lineHeight: '20px' }">推荐人可获得</span>
          <span :style="{ fontSize: '30px', color: '#FFF8AF', fontWeight: 'bold' }">10%</span>
          <span :style="{ fontSize: '16px', lineHeight: '20px' }">团队奖励</span>
        </a-flex>
        <a-flex :style="{ height: '24px', borderRadius: '12px', padding: '5px 12px 7px', backgroundColor: '#ffffff', color: '#F3315A' }">
          <span :style="{ fontSize: '12px' }">邀好友共建新时代全员持股商务社交平台</span>
        </a-flex>
      </a-flex>
      <a-flex class="invitation-code-wrapper" vertical justify="space-between">
        <span :style="{ fontSize: '16px', lineHeight: '22px', color: '#1B1B1B' }">我的邀请码</span>
        <a-flex :style="{ width: '100%', height: '36px' }" justify="space-between">
          <span class="invitation-code-view">T0ALC1</span>
          <span class="btn-copy">复制</span>
        </a-flex>
        <span :style="{ fontSize: '16px', lineHeight: '22px', color: '#EA224C' }">立即邀请</span>
      </a-flex>
      <div class="rule-description-wrapper">
        <div class="title">规则说明</div>
        <div class="list">
          <a-flex class="item">
            <div class="order">1</div>
            <div class="content">选择不同渠道分享好友邀请函，好友通过此二维码下载或填写推荐人的邀请码注册即邀请成功</div>
          </a-flex>
          <a-flex class="item">
            <div class="order">2</div>
            <div class="content">平台严禁任何作弊行为，一经发现，平台有权扣除全部奖励并永久封禁账户，由此造成的财产损失平台不负有责任。</div>
          </a-flex>
          <a-flex class="item">
            <div class="order">3</div>
            <div class="content">平台严禁任何作弊行为，一经发现，平台有权扣除全部奖励并永久封禁账户，由此造成的财产损失平台不负有责任。</div>
          </a-flex>
        </div>
      </div>
      <div style="height: 80px"></div>
    </div>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped lang="less">
  .page-wrapper {
    height: 100%;
    overflow-y: auto;
  }
  .page-wrapper::-webkit-scrollbar {
    display: none;
  }
  .wrapper {
    min-height: 100%;
    background-image: url(/@/assets/images/h5/bg-inviteFriend.png);
    background-size: 100% auto;
    background-position: 0 -88px;
    background-repeat: no-repeat;
  }
  .invitation-code-wrapper {
    height: 160px;
    padding: 18px 38px;
    margin: 0 12px 16px;
    border-radius: 10px;
    text-align: center;
    background-image:
      radial-gradient(circle at left center, transparent, transparent 10px, #ffffff 10px),
      radial-gradient(circle at right center, transparent, transparent 10px, #ffffff 10px);
    background-size:
      70% 100%,
      50% 100%;
    background-position:
      0% 0%,
      100% 0%;
    background-repeat: no-repeat, no-repeat;
  }
  .invitation-code-view {
    width: 200px;
    background-color: #e8eaf0;
    color: #000000;
    padding: 8px;
    font-size: 20px;
    line-height: 20px;
    font-weight: bold;
    letter-spacing: 0.3em;
  }
  .btn-copy {
    width: 50px;
    border: 1px solid #e9204b;
    color: #e9204b;
    padding: 11px 12px;
    font-size: 12px;
    line-height: 12px;
    border-radius: 6px;
  }
  .rule-description-wrapper {
    margin: 0 12px;
    padding: 16px 22px;
    border-radius: 10px;
    background-color: #ffffff;
    .title {
      color: #1b1b1b;
      font-size: 16px;
      line-height: 22px;
      margin-bottom: 20px;
    }
    .item + .item {
      margin-top: 16px;
    }
    .order {
      flex-shrink: 0;
      width: 11px;
      height: 11px;
      border-radius: 50%;
      color: #ffffff;
      text-align: center;
      font-size: 10px;
      line-height: 1;
      background-color: #f02d56;
      margin-right: 6px;
      margin-top: 4px;
    }
    .content {
      font-size: 12px;
      line-height: 20px;
      color: #373737;
    }
  }
</style>
